<template>
    <div id="PersonalData">
        <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="handleUpload"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" width="100%">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-button  type="primary" @click="dialogFormVisible = true" id="button">更改资料</el-button>
        <el-dialog title="编辑资料" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户账号" :label-width="formLabelWidth">
                    <el-input v-model="form.account" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>      
                <el-form-item label="性别" prop="resource" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.checkedSex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" :label-width="formLabelWidth">   
                    <el-date-picker
                    v-model="form.birthday"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="所在地区" :label-width="formLabelWidth">
                    <el-input v-model="form.region" autocomplete="off"></el-input>
                </el-form-item> 
                <el-form-item label="个人简介" :label-width="formLabelWidth">
                    <el-input v-model="form.brief" autocomplete="off"></el-input>
                </el-form-item> 
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
        <div id="UserName">用户名：{{form.name}}</div>
    </div>
</template> 
<script>
import { GainInformation,UploadAvatar ,ChangeInformation} from "@/service/Api.js";
import { put, getFileNameUUID  } from "@/utils/Alioss.js";
export default {
    name:"personaldata",
    data(){
        return{
            dialogFormVisible: false,
            formLabelWidth: '120px',
            form: {
                name: '',
                checkedSex: '',
                birthday:'',
                brief:'',
                region:'',
                account:'',
            },
            imageUrl:'',
        }
    },
    methods:{
        submit(){
            let params={
                name : this.form.name,
                sex	: this.form.checkedSex[0],
                birthday : this.form.birthday,
                home : this.form.region,
                sel_show : this.form.brief
            }
            console.log(params)
            ChangeInformation(params).then((res)=>{
                console.log(res)
            })

        },
        handleUpload(option) {
            let objName = getFileNameUUID();
            put(`aaaaaa${objName}`, option.file).then((res) => {
                this.imageUrl = res.url;
                let params={
                    avatar:res.url
                }
                console.log(res.url)
                UploadAvatar(params).then((res)=>{
                    console.log(res)
                })
            });
            
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error("上传图片大小不能超过 2MB!");
            }
            return isLt2M;
        },
        DataBinding(res){
            this.form.name = res.data.data.name
            this.form.checkedSex = res.data.data.sex
            this.form.birthday = res.data.data.birthday
            this.form.region = res.data.data.home
            this.form.brief = res.data.data.sel_show    
            this.form.account = res.data.data.email   
            this,this.imageUrl = res.data.data.avatar     
        }
    },
    created(){
        GainInformation().then((res)=>{
            console.log(res)
            this.DataBinding(res)
        })


    }
  
}
</script>
<style scoped>
img{
    width: 178px;
    height: 178px;
}
i{
    visibility: hidden;
}
#button{
    float: right;
    width: auto;
    margin-right: 36px;
    margin-top:144px ;

}
#UserName{
    width: auto;
    margin-top: 72px;
    float: left;
    font-size: 1.1em;
    margin-left:24px ;

}
#PersonalData{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 70%;
    margin: auto;
    min-width: 980px;
    min-height: 214px;
    background-color: #fff;
    margin-top: 52px;
    padding-top: 36px;
}
</style>
<style>
.avatar-uploader{
    width: 178px;    
    float: left;
}
  .avatar-uploader .el-upload {
    margin-left:24px;

    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>